import { getModels } from '@/app/[language]/(main)/models/action'
import Icon from '@/components/common/icon'
import Image from '@/components/common/image'
import Link from '@/components/common/link'
import MyButton from '@/components/form/my-button'
import { Card } from '@/components/layout/card-list'
import { getModelsUrl } from '@/utils/build-url/models'
import { formatPrice } from '@/utils/format/price'
import React from 'react'
import { AiOutlineRight } from 'react-icons/ai'
import CarRate from '../car-rate'

export interface IModelCardProps{
  brandSlug: string
  brandName: string
  coverUrl: string
  name: string
  minPrice: number
  bodyTypeName: string
  slug: string
}
interface Props {
  obj: IModelCardProps
  className?: string
}
const ModelCard = ({obj, className}: Props) => {
  return (
    <Card disabled className={className}>
      <Image src={obj.coverUrl} alt={obj.name} />
        <div className='px-card-p-x md:px-card-p-x-md py-card-p-y md:py-card-p-y-md space-y-content-gap-y md:space-y-content-gap-y-md'>
          <div className='space-y-txt-gap-y md:space-y-txt-gap-y-md'>
            <strong className='block h2'> {obj.brandName} | {obj.name}</strong>
            <span className='font-semibold block text-primary'>{formatPrice({minPrice: obj.minPrice})}</span>
          </div>
          <div>
            车友评分：<CarRate score={3} />
          </div>
          <div className='flex flex-wrap gap-button-gap-x md:gap-button-gap-x-md'>
            <MyButton className='text-[#333]! border-[#333]!' variant='outline' size='small'>
              <Link className='flex items-center justify-center' href={getModelsUrl({
                language: 'zh',
                brandSlug: obj.brandSlug,
                modelSlug: obj.slug,
              })}>精美车图</Link>
            </MyButton>
            <MyButton className='text-[#333]! border-[#333]!' variant='outline' size='small'>
              <Link className='flex items-center justify-center' href={getModelsUrl({
                language: 'zh',
                brandSlug: obj.brandSlug,
                modelSlug: obj.slug,
              })}>车友圈</Link>
            </MyButton>
            <MyButton asChild className='flex-1' variant='primary' size='small'>
              <Link className='flex items-center justify-center' href={getModelsUrl({
                language: 'zh',
                brandSlug: obj.brandSlug,
                modelSlug: obj.slug,
              })}>详情 <Icon icon={AiOutlineRight} /></Link>
            </MyButton>
          </div>
        </div>
    </Card>
  )
}

export default ModelCard